import "./Active.scss";
import React, { Component } from "react";
import { Button, Form, Input, Row, Col, message } from "antd";
import { LeftOutlined } from "@ant-design/icons";
import CustomRichText from "@/components/page/CustomRichText";
import CustomPreview from "@/components/page/CustomPreview";
import { updatePage, getPageById } from "@/api/page";
export default class Active extends Component {
    constructor() {
        super();
        this.state = {
            _id: null,
            pageName: "活动页标题",
            htmlString: "",
        };
    }
    UNSAFE_componentWillMount() {
        this.setState(
            {
                _id: this.props.match.params._id,
            },
            () => {
                this.getPageById_com();
            }
        );
    }
    getPageById_com = () => {
        getPageById({ _id: this.state._id }).then(res => {
            if (res.code === 200) {
                const { pageName, htmlString } = res.data;
                this.setState({
                    pageName,
                    htmlString,
                });
            }
        });
    };
    changeRichText = htmlString => {
        this.setState({ htmlString });
    };
    render() {
        const { htmlString, pageName, _id } = this.state;
        return (
            <div>
                <Button
                    className="mb-10"
                    onClick={() => {
                        this.props.history.goBack();
                    }}
                >
                    <LeftOutlined />
                </Button>
                <div className="flex">
                    <CustomPreview pageName={pageName} htmlString={htmlString} />
                    <div className="flex-1 ml-50 flex-column jc-start ai-end">
                        <Row style={{ width: "100%" }}>
                            <Col span={8}>
                                <Form ref="pageInfoFormRef" initialValues={{ pageName }}>
                                    <Form.Item label="活动页标题" name="pageName" rules={[{ required: true, message: "请输入活动页标题" }]}>
                                        <Input
                                            onChange={e => {
                                                this.setState({ pageName: e.target.value });
                                            }}
                                        />
                                    </Form.Item>
                                </Form>
                            </Col>
                        </Row>
                        <CustomRichText onChange={this.changeRichText} htmlString={htmlString} />
                        <Button
                            onClick={() => {
                                this.refs.pageInfoFormRef.validateFields().then(formData => {
                                    updatePage({ _id, pageName, htmlString }).then(res => {
                                        if (res.code === 200) {
                                            message.success("保存成功");
                                        }
                                    });
                                });
                            }}
                            type="primary"
                            className="mt-10"
                        >
                            保存
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}
